﻿@namespace BootstrapBlazor.Components

<div @ref="Element">

    <pre> @(Message??Status)</pre>
    <pre id="@Options.ErrorOutputDom"></pre>

    <div class="row g-3">
        @if (!SingleFunction)
        {

            <div>
                <label class="btn btn-primary" for="@Options.CaptureDom">拍照</label><input type="file" class="sr-only" id="@Options.CaptureDom" name="file" accept="image/*" capture />
                <label class="btn btn-primary" for="@Options.FileInputDom">图片</label><input type="file" class="sr-only" id="@Options.FileInputDom" name="file" accept="image/*" />
                &nbsp;
                @if (IsOpenCVReady)
                {
                    if (ChildContent != null)
                    {
                        @ChildContent
                    }
                    else
                    {
                        <Button Text="灰度化" OnClickWithoutRender="(() => Apply(EnumImageHelperFunc.Grayscale))" />
                        <Button Text="边缘检测" OnClickWithoutRender="(() => Apply(EnumImageHelperFunc.EdgeDetection))" />
                        <Button Text="特征点检测" OnClickWithoutRender="(() => Apply(EnumImageHelperFunc.FeaturePointDetection))" />
                        <Button Text="人脸检测" OnClickWithoutRender="(() => Apply(EnumImageHelperFunc.FaceDetection1st))" />
                        <Button Text="摄像头" OnClickWithoutRender="(() => Apply(EnumImageHelperFunc.FaceDetectionInCamera))" />
                        <Button Id="@Options.StartAndStopDom" Text="" />
                        <div class="col-12 mt-3">
                            <Select @bind-Value="Options.Type" ShowLabel="true" OnSelectedItemChanged="OnChanged" />
                        </div>
                    }
                }
            </div>
        }
        <div class="inputoutput col-12 col-sm-6">
            @if (Options.Type != EnumImageHelperFunc.FaceDetectionInCamera)
            {
            }
            else
            {
            }
            <canvas id="@Options.ImageDataDom"
                    width="640"
                    height="640"
                    class="canvas" />
            <video id="@Options.VideoInputDom"
                   width=640
                   height=640
                   data-action="video"
                   class="video"
                   muted
                   webkit-playsinline
                   playsinline
                   x-webkit-airplay="allow"
                   x5-video-player-type="h5"
                   x5-video-player-fullscreen="true"
                   x5-video-orientation="portraint"
                   hidden>
                Video stream not available.
            </video>
            <div data-action="@Options.SourceSelectPanelDom" style="display:none">
                <label for="@Options.SourceSelectDom">@Options.SelectDeviceBtnTitle:</label>
                <select data-action="@Options.SourceSelectDom" style="max-width:100%" class="form-select form-control">
                </select>
            </div>
        </div>
        <div class="inputoutput col-12 col-sm-6">
            <canvas id="@Options.CanvasOutputDom" width="640" height="640" class="canvas"></canvas>
        </div>
    </div>
</div>
